<template>
	<view class="contain">
		<view class="msg-tlt">{{ title }}</view>
		<u-parse :content="showContent"></u-parse>
		<view class="footer">
			<button
				class="footer-btn"
				:disabled="timeLimits > 0"
				@click="onNext"
				:style="{ 'background-color': timeLimits > 0 ? '' : detailInfo.raceColor || '#0071c5' }"
			>
				我已阅读并同意（{{ timeLimits }}s）
			</button>
		</view>
	</view>
</template>

<script>
const app = getApp()
let stopTime = null
export default {
	data() {
		return {
			detailInfo: {},
			showContent: '',
			title: '参赛声明',
			timeLimits: 10
		}
	},
	onLoad(options) {
		const eventChannel = this.getOpenerEventChannel()
		eventChannel.on('parentEvent', (data) => {
			this.detailInfo = data
			this.initData()
			uni.setNavigationBarTitle({
				title: data.name
			})
		})
	},
	methods: {
		initData() {
			this.showContent = this.detailInfo.raceRemind
			this.countTime()
		},
		// getInfo(id) {
		// 	uni.showLoading({ title: '数据加载中' })
		// 	/* prettier-ignore */
		// 	this.$https(false, 'get', {
		// 		url: '/race/race/info/'+id
		// 	}, (res) => {
		// 		this.detailInfo = res.data
		// 		this.initData()
		// 	})
		// 	/* prettier-ignore */
		// },
		countTime() {
			clearInterval(stopTime)
			this.timeLimits = 10
			stopTime = setInterval(() => {
				this.timeLimits--
				if (this.timeLimits == 0) {
					clearInterval(stopTime)
				}
			}, 1000)
		},
		onNext() {
			const { isQuestions, isSign, id, ...params } = this.detailInfo

			if (params.isRead == 1 && !params.isRead_show) {
				this.showContent = this.detailInfo.readContent
				this.countTime()
				this.title = '注意事项'
				this.detailInfo.isRead_show = true
			} else if (params.isRead2 == 1 && !params.isRead2_show) {
				this.showContent = this.detailInfo.readContent2
				this.countTime()
				this.title = '注意事项2'
				this.detailInfo.isRead2_show = true
			} else if (params.isRead3 == 1 && !params.isRead3_show) {
				this.showContent = this.detailInfo.readContent3
				this.countTime()
				this.title = '注意事项3'
				this.detailInfo.isRead3_show = true
			} else if (params.isRead4 == 1 && !params.isRead4_show) {
				this.showContent = this.detailInfo.readContent4
				this.countTime()
				this.title = '注意事项4'
				this.detailInfo.isRead4_show = true
			} else if (params.isRead5 == 1 && !params.isRead5_show) {
				this.showContent = this.detailInfo.readContent5
				this.countTime()
				this.title = '注意事项5'
				this.detailInfo.isRead5_show = true
			} else if (params.isRead6 == 1 && !params.isRead6_show) {
				this.showContent = this.detailInfo.readContent6
				this.countTime()
				this.title = '注意事项6'
				this.detailInfo.isRead6_show = true
			} else if (params.isRead7 == 1 && !params.isRead7_show) {
				this.showContent = this.detailInfo.readContent7
				this.countTime()
				this.title = '注意事项7'
				this.detailInfo.isRead7_show = true
			} else if (isQuestions == 1) {
				this.$utils.navigateTo(true, `/pagesA/sign/question?id=${id}`)
			} else if (isSign == 1) {
				this.$utils.navigateTo(true, `/pagesA/sign/qianming?id=${id}`)
			} else {
				this.$utils.navigateTo(true, '/pagesA/sign/detail?id=' + id)
			}
		}
	}
}
</script>

<style scoped lang="scss">
.contain {
	padding: 0 32rpx;
	min-height: calc(100vh - 130rpx);
	padding-bottom: 130rpx;
	background-color: #fff;
}
.msg-tlt {
	font-size: 30rpx;
	color: #333;
	text-align: center;
	padding: 10rpx 0 20rpx;
	border-bottom: 1px solid #eee;
	margin-bottom: 20rpx;
}
.msg-content {
	width: 100%;
	margin-top: 20rpx;
	color: #999;
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-btn {
		width: 684rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #0071c5;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #fff;
		margin: 0;
		&[disabled] {
			background-color: #ddd;
		}
	}
}
</style>
